{% extends '_layout.html' %}
{% block style %}
    <style>
        .card {
            margin-top: 10px;
        }
        .result{
            margin-left:20px;
        }
        .input-group{
            margin-top: 10px;
            width:240px;
            
        }
    </style>
{% endblock %}
{% block main %}
    <div class="card">
        <ul class="list-group list-group-flush">
            <li class="list-group-item">
                <div class="row" id='Ada'>
                    {% for param in moder_param %}
                    <div class="col">
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <span class="input-group-text" id="basic-addon3">{{param}}</span>
                            </div>
                            <input type="text" class="form-control" placeholder="" id="{{param}}">
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </li>
            <li class="list-group-item">
                <button class="btn btn-info" id="train-lr">Adaboost训练</button>
                <span id="train-result-lr"  class="result"> (default: DecisionTree) </span>
            </li>
            <li class="list-group-item">
                <div class="row" id='Grad'>
                    {% for param in moder_param %}
                    <div class="col">
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <span class="input-group-text" id="basic-addon3">{{param}}</span>
                            </div>
                            <input type="text" class="form-control" placeholder="" id="{{param}}">
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </li>
            <li class="list-group-item">
                <button class="btn btn-success" id="train-tree">GradientBoost训练</button>
                <span id="train-result-tree"  class="result"></span>
            </li>
        </ul>
    </div>

    <div class="card">
        <div class="card-header">
            输入数据
        </div>
        <div class="card-body">
            <ul class="list-group list-group-flush">
                <li class="list-group-item">
                    <div class="row">
                        {% for col in columns %}
                        <div class="col">
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text" id="basic-addon3">{{col}}</span>
                                </div>
                                <input type="text" class="form-control" placeholder="" id="{{col}}">
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                </li>
                <li class="list-group-item">
                    <button class="btn btn-info" id="predict-lr">AdaBoost模型预测</button>
                    <span id="predict-result-lr" class="result badge badge-danger"></span>
                </li>
                <li class="list-group-item">
                    <button class="btn btn-success" id="predict-tree">GradientBoost模型预测</button>
                    <span id="predict-result-tree" class="result badge badge-danger"></span>
                </li>
            </ul>
        </div>

    </div>

{% endblock %}

{% block script %}
    <script>
        $('document').ready(function () {
            $('#train-lr').click(function () {
                $.post("{%  url 'demo:api_loan_t_logistic' %}", {data: JSON.stringify(get_input_param('#Ada'))}, function (data, status) {
                    $('#train-result-lr').html(data)
                })
            })
            $('#train-tree').click(function () {
                $.post("{%  url 'demo:api_loan_t_tree' %}", {data: JSON.stringify(get_input_param('#Grad'))}, function (data, status) {
                    $('#train-result-tree').html(data)
                })
            })

            function get_input_param( id ){
                let data = [
                    {% for param in moder_param %}$(id+' #{{param}}').val(),{% endfor %}
                ]
                return data.map(x=>x*1)
            }

            function get_input(){
                let data = [
                    {% for col in columns %}$('#{{col}}').val(),{% endfor %}
                ]
                return data.map(x=>x*1)
            }

            $('#predict-lr').click(function () {
                $.post("{% url 'demo:api_loan_p_logistic' %}", {data: JSON.stringify(get_input())}, function (data, status) {
                    $('#predict-result-lr').html(data)
                })
            })
            $('#predict-tree').click(function () {
                $.post("{% url 'demo:api_loan_p_tree' %}", {data: JSON.stringify(get_input())}, function (data, status) {
                    $('#predict-result-tree').html(data)
                })
            })
        })

    </script>
{% endblock %}